//短信登录组件 
import React from 'react';
// 引入验证码组件
import IdentifyinCode from '../../component/identifyinCode';
import { Button, Form, Input,Space,message } from 'antd';
// 引入图标组件
import {  UserOutlined,KeyOutlined } from '@ant-design/icons';
// 引入状态hook
import {useState} from 'react'
// 导入两个hook来操作redux
// useSelector获取数据，useDispatch用来 调用reducer方法
import {useSelector,useDispatch} from 'react-redux'
// 导入路由相关的hook
import {useHistory} from 'react-router-dom'
// 导入hook：useref，实现子传父
import {useRef} from 'react'
//导入接口
import {yzm , sendmessage } from '@/api/login'

const MobileLogin = () => {
    const dispatch = useDispatch()
    const history = useHistory()//相当于类组件中的this.props.his
    // 创建ref对象,ref1.current中包含子组件传给父组件的方法
    const ref1= useRef()
    console.log(ref1,'ref1');
    const [key, setkey] = useState('');//接收子传父的key
    let [time, settime] = useState(5);//定义倒计时的初始值
    // 提交表单且数据验证成功后回调事件
    const onFinish = (values) => {
        console.log('提交的数据:', values);
        // 调用短信登录接口, 成功后, 跳转到首页
        history.push('/Dashboard')
        };
    // 登录验证失败执行的函数
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
        };

    // 定义一个 savekey函数 ,用来接收子传父的key
    const saveKey = (key)=>{
        setkey(key)
        }

    // 获取form 表单实例(antd form 表单提供的方法)
    const [form] = Form.useForm();
    let timer = null;
    // 定义发送验证码函数
    const sendMessageFn=()=>{
        // 01: 点击发送验证码, 首先需要验证 手机号和图形验证码是否填写
        // 利用form实例FormInstance上的validateFields方法验证
        form.validateFields(['mobile','captcha']).then(res=>{
            console.log('验证通过',res);
            //执行then中 （说明验证通过：手机号验证码都不为空）
            // 此时调用图形验证码接口，判断验证码是否正确
            yzm({key:key,captcha:res.captcha}).then(res1=>{
                console.log('res1',res1);
                if(res1.data.errNo==0){
                    // 表示图形验证码验证成功
                    // 此时调用发送短信验证码接口
                    // message({
                    //     token:res1.data.context.token,
                    //     mobile:res.mobile,
                    //     type:0
                    // }).then(res2=>{
                    //     console.log(res2);
                    // })
                      // 假设短信验证码发送成功了, 开始倒计时
                    timer = setInterval(()=>{
                        time--
                        if(time==0){
                            time=5
                            clearInterval(timer)
                        }
                        settime(time)
                    },1000)
                }else{
                    // 表示图形验证码验证失败：
                    // 弹出错误提示一秒后消失，清空表单内容，并自动刷新验证码
                    // message.error(提示内容, [duration], 关闭时触发的回调函数)
                    message.error(res1.data.errText,1,()=>{
                        ref1.current.Refresh()//自动刷新验证码
                        //清空表单内容
                        form.setFieldsValue({
                            mobile: '',
                            captcha: ''
                        })
                    })

                }
            })
        }).catch(err=>{
             // 表示验证失败
            console.log('验证失败', err);
        })
    }
    return (
        <div>
        <Form
        form={form}
        name="basic"
        wrapperCol={{
        span: 24,
        }}
        initialValues={{
            remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        size='large'
        >
        <Form.Item
            name="mobile"
            rules={[
            {
                required: true,
                message: '请输入手机号!',
            },
            ]}
        >
            <Input placeholder='手机号' prefix={<UserOutlined className="site-form-item-icon" />}/>
        </Form.Item>

        <Space>
            <Form.Item
        
                name="captcha"
                rules={[
                    {
                        required: true,
                        message: '请输入验证码!',
                    },
                    ]}
            >  
            <Input placeholder='验证码'  prefix={<KeyOutlined className="site-form-item-icon" />}/>
            </Form.Item>
            <Form.Item>
                {/* 验证码组件 */}
                <IdentifyinCode ref={ref1} saveKey={saveKey} height={38}></IdentifyinCode>
            </Form.Item>  
        </Space>

        <Space>
        <Form.Item
            name="code"
            rules={[
            {
                required: true,
                message: '请输入验证码!',
            },
            ]}
        >
            <Input placeholder='图形验证码' prefix={<KeyOutlined className="site-form-item-icon" />}/>
        </Form.Item>  
        <Form.Item>
            {/* 发送验证码按钮 */}
            <Button onClick={sendMessageFn} disabled={time!=5}>{time!=5?`倒计时${time}秒`:'发送验证码'}</Button>
        </Form.Item>      
        </Space>
        
        <Form.Item
            wrapperCol={{
            span: 24,
            }}
        >
            <Button type="primary" htmlType="submit" block>
            登录
            </Button>
        </Form.Item>
        </Form>
        </div>
    );
}

export default MobileLogin;
